<template>
  <div class="collectBox">
    <div
      v-for="(date, index) in dateList"
      :key="index"
    >
      <div class="timeBox">
        <div class="time">
          {{ date | formatDate(2) }}
        </div>
        <div class="timeline" />
      </div>
      <div class="fruit_list">
        <template v-for="cate in his">
          <div
            v-if="cate.viewDate == date"
            :key="cate.id"
            class="cate-item"
            :class="showOver == true ? 'overDiv' : ''"
            @click="showOver == false ? GoToSho(cate) : ''"
          >
            <div
              v-if="showOver == true"
              class="checkbox_box"
              @click="CheckClick(cate)"
            >
              <el-checkbox v-model="cate.CheckboxStatus" />
            </div>
            <div class="huodong_div">
              <img
                :src="cate.defaultAlbum"
                alt=""
              >
            </div>
            <div class="fruit_detail">
              <div>
                <div class="title">
                  {{ cate.cName }}
                </div>
                <div>
                  <span class="money">￥</span>
                  <span class="price">{{ cate.fSalePrice }}</span>
                </div>
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      his: {},
      dateList: [],
      product: [],
      showOver: false, // 遮罩层显示状态
      checkedCities: [], // 勾选复选框数据
    };
  },
  mounted() {
    this.getHistories();
  },
  methods: {
    //获取足迹
    getHistories() {
      let par = {
        token: localStorage.getItem("token"),
        data: {},
      };
      this.$api.person.getHistories(par).then((res) => {
        if (res.code == 200) {
          res.data.pager.data.forEach((element) => {
            this.$set(element, "CheckboxStatus", false);
          });
          this.his = res.data.pager.data;
          this.dateList = res.data.viewDateList;
        }
      });
    },
    // 遮罩是否显示
    showOverDiv(showOverDiv) {
      console.log("显示遮罩状态:",showOverDiv)
      this.showOver = showOverDiv
    },
    // 批量操作状态
    OperationStatus(OperationStatus) {
      console.log("接收批量操作状态", OperationStatus);
      if (OperationStatus) {
        this.showOver = true;
      } else {
        this.showOver = false;
      }
    },
    // 是否全选  设置蒙版按钮样式
    selecteAll(selecteAll) {
      console.log(selecteAll, "接收是否全选", this.his);
      if (selecteAll) {
        this.his.forEach((element) => {
          this.$set(element, "CheckboxStatus", true);
        });
        this.checkedCities = this.his;
      } else {
        this.his.forEach((element) => {
          this.$set(element, "CheckboxStatus", false);
        });
        this.checkedCities = this.his;
      }
    },
    // 批量加入购物车
    AllAddCar() {
      console.log("接收批量加入购物车");
      if(this.checkedCities.length === 0) {
        this.$message.error('请选择商品');
      } else {
        this.checkedCities.forEach(element => {
          this.AddCar(element)
        });
      }
    },
    // 加入购物车API
    AddCar(AddCar) {
      console.log('加入购物车', AddCar)
      let params = {
        token: localStorage.getItem("token"),
        data: [
          {
            iSKUId: AddCar.defaultSKUId,
            iProductId: AddCar.pid,
            onLineOffLine: 0,
            iQuantity: 1,
            dlyType: "EMS",
          },
        ],
      };
      console.log("params", params);
      this.$api.good.addCarts(params).then((res) => {
        console.log("addCarts", res);
        if (res.code == 200) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 批量删除
    AllCancelCollection() {
      console.log("接收批量取消",);
      if(this.checkedCities.length === 0) {
        this.$message.error('请选择商品');
      } else {
        let ids = []
        this.checkedCities.forEach(element => {
          ids.push(element.id)
        });
        this.CancelCollection(ids)
      }
    },
    // 删除API deleteHistories
    CancelCollection(CancelCollection) {
      console.log("删除", CancelCollection);
      let params = {
        token: localStorage.getItem("token"),
        data: {
          ids: CancelCollection,
        }
      };
      this.$api.person.deleteHistories(params).then((res) => {
        if (res.code == 200) {
          this.$message.success(res.message);
          this.getHistories();
          if (this.his.length === 0) {
            this.$emit("selectStatusAll", false);
          }
          this.$emit("AllRefreshPage");
        }
      });
    },
    // 获取批量选择
    CheckClick(CheckClick) {
      console.log("获取批量选择", CheckClick);
      let CheckedCitiesArr = [];
      CheckClick.CheckboxStatus = !CheckClick.CheckboxStatus;
      for (let i in this.his) {
        if (this.his[i].CheckboxStatus) {
          CheckedCitiesArr.push(this.his[i]);
        }
      }
      this.checkedCities = CheckedCitiesArr;
      console.log("获取批量选择", this.checkedCities);
      if (CheckedCitiesArr.length !== this.his.length) {
        console.log("全选关");
        this.selecteAllstatus = false
        this.$emit("selectStatusAll", this.selecteAllstatus);
      } else {
        console.log("全选开");
        this.selecteAllstatus = true
        this.$emit("selectStatusAll", this.selecteAllstatus);
      }
    },
    //跳转商品详情
    GoToSho(GoToSho) {
      this.$router.push({
        path: "/fruit/detail",
        query: {
          id: GoToSho.pid,
          iShopId: GoToSho.iShopId
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.collectBox {
  .timeBox {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 1.75rem 0 1.25rem;

    .time {
      color: #979797;
      font-size: 1.13rem;

      span {
        color: #c4944e;
      }
    }

    .timeline {
      width: 55.75rem;
      height: 0.06rem;
      background: rgba(198, 198, 198, 1);
    }
  }

  .fruit_list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;

    .cate-item {
      position: relative;
      width: 20.63rem;
      height: 28.13rem;
      background: rgba(255, 255, 255, 1);
      display: flex;
      flex-direction: column;
      justify-content: center;
      cursor: pointer;
      margin-bottom: 1.88rem;
      margin-right: 1.59rem;

      &:nth-child(3n) {
        margin-right: 0;
      }

      .overDiv {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        z-index: 5;

        div {
          position: absolute;
          right: 0;
          top: 0;
          width: 2.44rem;
          height: 2.44rem;
          background: #000;
          z-index: 6;
          color: #fff;
          line-height: 2.44rem;
          text-align: center;
          font-size: 0.88rem;

          &.close {
            position: absolute;
            right: 0;
            top: 0;
            width: 2.44rem;
            height: 2.44rem;
            background: #f0406f;
            z-index: 6;
            color: #fff;
            line-height: 2.44rem;
            text-align: center;
            font-size: 0.88rem;
          }
        }
      }

      div.huodong_div {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        width: 20.63rem;
        height: 20.63rem;

        img {
          width: 15.5rem;
          // height: 15.5rem;
          // width: 100%;
          object-fit: contain;
        }

        .huodong {
          width: 15.98rem;
          height: 3.56rem;
          position: absolute;
          bottom: 0;
          left: 0;
          z-index: 4;
          background: url(../../assets/img/fruit_huodong.png) no-repeat left top;
          background-size: 100% 100%;
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          color: #fff;
          padding: 0 2.5rem 0 2.15rem;

          .leftBox {
            width: 4.5rem;
            height: 2.44rem;
            font-size: 1.13rem;
            line-height: 1.39rem;

            > span {
              font-size: 0.8rem;
            }
          }

          .rightBox {
            font-size: 1rem;
            line-height: 1.95rem;
          }
        }
      }

      .fruit_detail {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 1rem 1.75rem 3.25rem 1.94rem;

        // width: 17.01rem;
        img {
          width: 1.5rem;
          height: 1.37rem;
        }

        .title {
          font-size: 1.375rem;
          color: #343434;
          padding-bottom: 0.5rem;
        }

        .money {
          font-size: 0.8rem;
          color: #f03f6e;
        }

        .price {
          color: #f03f6e;
          font-size: 1.37rem;
          margin-right: 0.44rem;
        }

        .haspay {
          font-size: 1rem;
          color: #999;
        }
      }
    }
    .checkbox_box {
      display: flex;
      justify-content: flex-end;
      background: rgba(0, 0, 0, 0.6);
      padding: 1rem;
      position: absolute;
      width: 18.63rem;
      height: 26rem;
      cursor: pointer; //鼠标变小手
      z-index: 9;
    }
  }

  .pagination_box {
    display: flex;
    justify-content: center;
    height: 3rem;
    align-items: center;
  }
}
</style>

<style>
.pagination_box
  .el-pagination.is-background
  .el-pager
  li:not(.disabled).active {
  background-color: rgba(17, 17, 17, 1);
  color: #fff;
}

.pagination_box .el-pagination.is-background .el-pager li:hover {
  color: rgba(17, 17, 17, 1);
}
</style>